<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="title"
  [loading]="isLoading"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <ix-fieldset>
        <ix-input
          formControlName="hostname"
          [label]="labels.hostname | translate"
          [tooltip]="tooltips.hostname | translate"
          [required]="true"
        ></ix-input>

        <ix-input
          formControlName="username"
          [label]="labels.username | translate"
          [tooltip]="tooltips.username | translate"
          [required]="true"
        ></ix-input>

        <ix-input
          type="password"
          formControlName="password"
          [label]="labels.password | translate"
          [tooltip]="tooltips.password | translate"
          [required]="true"
        ></ix-input>

        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="button"
          ixTest="fetch-datastores"
          [disabled]="isLoading || disableFetchDatastores"
          (click)="onFetchDataStores()"
        >
          {{ 'Fetch DataStores' | translate }}
        </button>
        <ix-select
          formControlName="datastore"
          [label]="labels.datastore | translate"
          [tooltip]="tooltips.datastore | translate"
          [required]="true"
          [options]="datastoreOptions$"
        ></ix-select>

        <ix-select
          formControlName="filesystem"
          [label]="labels.filesystem | translate"
          [tooltip]="tooltips.filesystem | translate"
          [required]="true"
          [options]="filesystemOptions$"
        ></ix-select>
      </ix-fieldset>

      <div class="form-actions">
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="form.invalid || isLoading"
        >
          {{ 'Save' | translate }}
        </button>
      </div>
    </form>
  </mat-card-content>
</mat-card>
